<template lang="html">
  <div class="banner">
    <swiper :options="swiperOption">
    <swiper-slide>
      <img src="../images/chuyiyw.png" alt="">
    </swiper-slide>
    <swiper-slide>
      <img src="../images/chuyiyw1.png" alt="">
    </swiper-slide>
    <swiper-slide>
      <img src="../images/zhongkaoyw.png" alt="">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name:"banner",
  data(){
    return{
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
        },
        loop:true
      }
    }
  },
  components:{
    swiper,
    swiperSlide
  }
}
</script>

<style scoped>

.banner img{
  width: 100%;
  height: 180px;
}


</style>
